<template>
	<view class="tips" v-if="!allowApply && allowEdit">
		- {{tips}} -
		<button open-type="contact">申请成为工作室</button>
	</view>
	<view class="userinfo" v-else>
		<view class="top">
			<image :src="avatarUrl || '/static/logo.png'" mode="" @click="!allowEdit?'':changeImg"></image>
		</view>
		<view class="info-input">
			<view class="title">
				工作室名称：
			</view>
			<input type="text" v-model="studio_name" placeholder="请输入工作室名称" :disabled="!allowEdit" />
		</view>
		<view class="info-input">
			<view class="title">
				类型：
			</view>
			<view class="select-box" v-if="allowEdit">
				<uni-data-select v-model="type" :localdata="range"></uni-data-select>
			</view>
			<view class="select-box" v-else>
				<view class="select-info">
					{{info.type.text}}
				</view>
			</view>
		</view>
		<view class="info-input">
			<view class="title">
				押金：
			</view>
			<input type="text" v-model="pledge" placeholder="请输入昵称" :disabled="!allowEdit" />
		</view>
		<view class="info-input">
			<view class="title">
				地址：
			</view>
			<input type="text" v-model="address" placeholder="请输入地址" :disabled="!allowEdit" />
		</view>
		<view class="btn" @click="save" v-if="allowEdit">
			申请
		</view>
		<view class="btn" v-else>
			{{info.status.text}}
		</view>
	</view>

</template>

<script>
	import {
		getUserTrain
	} from "@/api/user.js"
	export default {
		data() {
			return {
				studio_name: '',
				info: [],
				avatarUrl: '',
				allowEdit: true,
				range: [],
				cover: '',
				tips: '',
				type: '',
				pledge: '',
				address: '',
				allowApply: false
			}
		},
		onLoad() {
			this.UserInfo()
		},
		methods: {
			changeImg() {
				let that = this
				uni.chooseImage({
					sourceType: ['album', 'camera'], //从相册选择
					count: 1,
					success: (res) => {
						let igmFile = res.tempFilePaths;
						uni.showLoading({
							mask: true,
							title: '加载中'
						})
						for (let i = 0; i < igmFile.length; i++) {
							uni.uploadFile({
								url: that.$config.requestUrl +
									'/User/forUpload',
								header: {
									'token': uni.getStorageSync('token')
								},
								formData: {
									accept: 'image',
								},
								filePath: igmFile[i],
								name: 'image',
								success: (res) => {
									uni.hideLoading()
									let imgRes = JSON.parse(res.data); //微信和头条支持
									if (imgRes.code == 0) {
										let imgData = imgRes.data
										that.avatarUrl = imgData.path
										that.cover = imgData.id
									} else {
										uni.showToast({
											title: res.message,
											icon: "none"
										})
										return
									}
								},
								fail(err) {
									uni.hideLoading()
								}
							})
						}
					},
				});
			},
			save() {
				changeNickName({
					studio_name: this.studio_name
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: "none"
					})
					if (res.code == 0) {
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}
				})
			},
			UserInfo() {
				getUserTrain().then(res => {
					if (res.code == 0) {
						this.info = res.data.info
						this.range = res.data.range
						this.studio_name = this.info.studio_name
						this.address = this.info.address
						this.pledge = this.info.pledge
						if (this.info) {
							this.type = this.info.type.value
						}
						this.avatarUrl = res.data.info.cover_path
						this.allowEdit = res.data.allowEdit
						this.allowApply = res.data.allowApply
						this.tips = res.data.tips
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.tips {
		text-align: center;
		padding-top: 40vh;
		color: #777;

		button {
			font-size: 14px;
			background: transparent;
			color: #050B18;
			margin-top: 10px;
			font-weight: bold;

			&::after {
				border: 0;
			}
		}
	}

	.userinfo {
		.top {
			text-align: center;
			padding-top: 20px;

			image {
				width: 100px;
				height: 100px;
				border-radius: 50%;
			}
		}

		.info-input {
			padding: 10px 5%;
			font-size: 14px;

			input {
				height: 40px;
				background-color: #fff;
				padding-left: 20rpx;
				margin-top: 20rpx;
				font-size: 14px;
			}

			.select-box {
				height: 40px;
				background-color: #fff;
				margin-top: 20rpx;
				display: flex;
				align-items: center;

				.select-info {
					padding-left: 20rpx;
				}
			}
		}
	}
</style>